/*
 * @Date: 2022-05-16 12:53:18
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-16 14:52:09
 * @FilePath: \react-lvyou\src\views\Login\LoginForm.tsx
 * @Description: something
 */
import React, { memo, useEffect } from "react";
import { validateCheakNickName, validateVPassword } from "@/utils/validate";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Card, Checkbox, Form, Input, message } from "antd";
import { Link, useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { fetchUserReqLogin } from "@/store/user";
import { useSelector } from "@/store/hooks";
const LoginForm = memo(() => {
  const { loading, token } = useSelector((state) => ({
    loading: state.User.loading,
    token: state.User.token,
  }));
  const dispatch = useDispatch();
  const navigate = useNavigate();
  useEffect(() => {
    if (token !== null) {
      navigate("/");
    }
  }, [token]);
  const onFinish = (values) => {
    dispatch<any>(
      fetchUserReqLogin({
        username: values.username,
        password: values.password,
      }),
    );
    console.log(values);
  };
  const onFinishFailed = ({ values, errorFields, outOfDate }) => {
    console.log(values);

    message.error({
      content: "请填写符合格式的信息",
    });
  };
  return (
    <Card style={{ width: 300 }}>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: "请输入账号!" }]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "请输入密码！" }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住我</Checkbox>
          </Form.Item>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            loading={loading}
          >
            登录
          </Button>

          <div>
            或 <Link to="/register">去注册</Link>
          </div>
        </Form.Item>
      </Form>
    </Card>
  );
});

export default LoginForm;
